<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_14</title>

		<script type="text/javascript">
			/**
			 * 测试insertBefore（）方法插入节点
			 * 该方法除了进行插入外，还有移动节点的功能 .
			 */
			window.onload = function() {

				alert("0");

				//1.把#rl插入到#bj节点 的前面
				var cityNode = document.getElementById("city");
				var bjNode = document.getElementById("bj");
				var rlNode = document.getElementById("rl");

				//cityNode.insertBefore(rlNode, bjNode);

				var seNode = document.getElementById("se");
				var djNode = document.getElementById("dj");
				insertAfter(rlNode, djNode);
			}

			//把newNode插入到refNode的后面
			function insertAfter(newNode, refNode) {
				//1.判断refNode是否为其父节点的最后的一个子节点
				var parentNode = refNode.parentNode;
				if(parentNode) {
					var lastNode = parentNode.lastChild;
					if(lastNode == refNode) {
						//2.若是：直接把newNode插入refNode的父节点的最后一个子节点.
						parentNode.appendChild(newNode);
					} else {
						//3.若不是：获取refNode的下一个兄弟元素，然后插入到其下一个兄弟节点的前面.
						var nextNode = refNode.nextSibling;
						parentNode.insertBefore(newNode, nextNode);
					}
				} else {

				}

			}
		</script>

	</head>

	<body>
		<p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li id="dj">东京</li>
			<li id="se">首尔</li>
		</ul>
		<br/><br/>
		<p>你喜欢哪款单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br /><br /> gender:
		<input type="radio" name="gender" id="gender" value="male" />Male
		<input type="radio" name="gender" id="gender" value="female" />Female

		<br/><br/> name:
		<input type="text" name="username" id="name" value="idea" />
	</body>

</html>